<template>
  <div class="main-content">
    <div class="screen-frame clearfix">
      <div class="col-md-6 col-lg-6">

        <div class="form-horizontal">
          <div class="form-group">
            <label class="col-md-3 col-sm-2 control-label">时间区间：</label>
            <div class="col-md-4 ">
              <input class="form-control"
                     type="date"
                     id="beginDate" />
            </div>
            <div class="col-md-4 ">
              <input class="form-control"
                     type="date"
                     id="endDate" />
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4 col-lg-5">
        <div class="form-horizontal">
          <div class="form-group">
            <label for=""
                   class="col-md-3 col-sm-2 control-label"></label>
            <div class="col-md-4 col-sm-4">
              <button type="button"
                      class="btn btn-theme"
                      v-on:click="list()">查询</button>
              <button type="button"
                      class="btn btn-theme"
                      v-if="exportBtnShow"
                      v-on:click="exportInfo">导出</button>
              <button type="button"
                      class="btn btn-theme"
                      v-if="!exportBtnShow"
                      v-on:click="exportRepeatMsg"
                      style="background-color: #999;">导出{{ timeOut }}</button>
            </div>
          </div>
        </div>
      </div>

    </div>
    <div class="table table-striped table-bordered">

      <div class="table-responsive">
        <table class="table table-striped table-bordered min-width-790">
          <thead>
            <tr>
              <th width="20%">TOP 10排行榜</th>
              <th width="20%">经纪人</th>
              <th width="10%">报备客户</th>
              <th width="10%">报备成功客户</th>
              <th width="10%">到访客户</th>
              <th width="10%">认筹客户</th>
              <th width="10%">认购客户</th>
              <th width="10%">签约客户</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(row,index) in agentRankList">
              <td>NO.{{[index,body.params.pageNo,body.params.pageSize] | formatNo }}</td>
              <td>{{row.accountName}}</td>
              <td>{{row.agentRankOne}}</td>
              <td>{{row.agentRankTwo}}</td>
              <td>{{row.agentRankThree}}</td>
              <td>{{row.agentRankFour}}</td>
              <td>{{row.agentRankFive}}</td>
              <td>{{row.agentRankSix}}</td>
            </tr>
            <tr class="result-total">
              <td>合计</td>
              <td>{{resultTotal.agentRankOne}}</td>
              <td>{{resultTotal.agentRankTwo}}</td>
              <td>{{resultTotal.agentRankThree}}</td>
              <td>{{resultTotal.agentRankFour}}</td>
              <td>{{resultTotal.agentRankFive}}</td>
              <td>{{resultTotal.agentRankSix}}</td>
            </tr>

          </tbody>
        </table>
      </div>
      <div id="laypage_agent_rank_report"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      agentRankList: [],
      body: {
        params: {
          pageNo: 1,
          pageSize: 10,
          beginDate: "",
          endDate: "",
        },
        resultTotal: {
          agentRankOne: 0,
          agentRankTwo: 0,
          agentRankThree: 0,
          agentRankFour: 0,
          agentRankFive: 0,
          agentRankSix: 0,
        },
      },
      exportBtnShow: true,
      timeOut: 10,
    };
  },
  filters: {
    formatNo: function ([value, begin, end]) {
      var index = (begin - 1) * end + value + 1;
      return index;
    },
  },
  mounted: function () {
    $("input[name=datetimepicker]").datetimepicker({
      format: "yyyy-mm-dd",
      autoclose: true,
      minView: 2,
    });
    this.list();
  },
  methods: {
    list: function () {
      var loadIndex = layer.load();
      var _self = this;
      var url = this.utilHelper.apiUrl + "/api/getAgentRankPage";
      _self.body.params.beginDate = $("#beginDate").val();
      _self.body.params.endDate = $("#endDate").val();
      _self.$http.post(url, _self.body).then((response) => {
        layer.close(loadIndex);
        var body = response.body.resData;
        if (body.result == 0) {
          layer.msg("接口异常!");
        } else {
          _self.agentRankList = body.pageModel.rows;
          //计算总计
          _self.setResultTotal();
          var totalPages = body.pageModel.totalPages;
          var current = body.pageModel.pageNumber;
          var total = body.pageModel.total;
          if (totalPages > 0) {
            layui.laypage.render({
              elem: $("#laypage_agent_rank_report"), //容器。值支持id名、原生dom对象，jquery对象,
              limit: _self.body.params.pageSize,
              curr: current,
              count: total,
              theme: "#f87242;", //皮肤
              first: "首页", //若不显示，设置false即可
              last: "尾页", //若不显示，设置false即可
              prev: "上一页", //若不显示，设置false即可
              next: "下一页", //若不显示，设置false即可
              limits: [10, 20, 50, 100, 200],
              layout: ["prev", "page", "next", "skip", "count", "limit"],
              jump: function (obj, first) {
                if (!first) {
                  _self.body.params.pageNo = obj.curr;
                  _self.params.pageSize = obj.limit;
                  _self.list();
                }
              },
            });
          }
        }
      });
    },
    exportInfo: function () {
      var _self = this;
      _self.exportBtnShow = false;
      var userId = window.localStorage.getItem("1_userId");
      var beginDate = $("#beginDate").val();
      var endDate = $("#endDate").val();
      var url =
        this.utilHelper.apiUrl +
        "/api/getAgentRankExport?params.userId=" +
        userId +
        "&params.beginDate=" +
        beginDate +
        "&params.endDate=" +
        endDate +
        "&params.loginType=1&params.op=all";
      window.location.href = url;

      var exportInterval = setInterval(function () {
        if (_self.timeOut <= 0) {
          window.clearInterval(exportInterval);
          _self.timeOut = 10;
          _self.exportBtnShow = true;
        } else {
          _self.timeOut -= 1;
        }
      }, 1000);
    },
    exportRepeatMsg: function () {
      var _self = this;
      layer.msg(_self.timeOut + "秒后可再次导出,请稍等片刻!");
      return;
    },
    setResultTotal() {
      var _self = this;
      _self.resultTotal = {
        agentRankOne: 0,
        agentRankTwo: 0,
        agentRankThree: 0,
        agentRankFour: 0,
        agentRankFive: 0,
        agentRankSix: 0,
      };
      for (var i in _self.agentRankList) {
        _self.resultTotal.agentRankOne =
          Number(_self.resultTotal.agentRankOne) +
          Number(_self.agentRankList[i].agentRankOne);
        _self.resultTotal.agentRankTwo =
          Number(_self.resultTotal.agentRankTwo) +
          Number(_self.agentRankList[i].agentRankTwo);
        _self.resultTotal.agentRankThree =
          Number(_self.resultTotal.agentRankThree) +
          Number(_self.agentRankList[i].agentRankThree);
        _self.resultTotal.agentRankFour =
          Number(_self.resultTotal.agentRankFour) +
          Number(_self.agentRankList[i].agentRankFour);
        _self.resultTotal.agentRankFive =
          Number(_self.resultTotal.agentRankFive) +
          Number(_self.agentRankList[i].agentRankFive);
        _self.resultTotal.agentRankSix =
          Number(_self.resultTotal.agentRankSix) +
          Number(_self.agentRankList[i].agentRankSix);
      }
    },
  },
};
</script>